<template>
  <n-card title="免密登录" :bordered="false">
    <n-space vertical>
      <!-- 顶部操作按钮 -->
      <n-space justify="end">
        <n-button type="primary" @click="showCreateModal = true">
          创建链接
        </n-button>
      </n-space>

      <!-- 数据表格 -->
      <n-data-table
        :columns="columns"
        :data="linkList"
        :pagination="pagination"
        :loading="loading"
      />
    </n-space>
  </n-card>

  <!-- 创建链接弹窗 -->
  <n-modal v-model:show="showCreateModal">
    <n-card
      style="width: 600px"
      title="创建免密登录链接"
      :bordered="false"
      size="huge"
    >
      <n-form :model="createForm">
        <n-form-item label="名称" path="name">
          <n-input v-model:value="createForm.name" placeholder="请输入名称" />
        </n-form-item>
        <n-form-item label="关联用户" path="userId">
          <n-select
            v-model:value="createForm.userId"
            :options="userOptions"
            placeholder="请选择关联用户"
          />
        </n-form-item>
      </n-form>

      <template #footer>
        <n-space justify="end">
          <n-button @click="showCreateModal = false">取消</n-button>
          <n-button type="primary" @click="handleCreate">确定</n-button>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script lang="ts" setup>
import { h, ref, reactive } from 'vue';
import {
  NButton,
  NTag,
  NSpace,
  useMessage,
  NModal,
  NCard,
  NForm,
  NFormItem,
  NInput,
  NSelect,
} from 'naive-ui';

const message = useMessage();
const loading = ref(false);
const showCreateModal = ref(false);

// 创建表单
const createForm = reactive({
  name: '',
  userId: null,
});

// 用户选项
const userOptions = ref([
  { label: '用户1', value: 1 },
  { label: '用户2', value: 2 },
  { label: '用户3', value: 3 },
]);

// 链接列表数据
const linkList = ref([
  // 示例数据
  {
    id: 1,
    name: '测试链接',
    userId: 1,
    link: 'https://example.com/login/123456',
    status: true,
  },
]);

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true,
});

// 表格列配置
const columns = ref([
  { title: '名称', key: 'name' },
  {
    title: '关联用户',
    key: 'userId',
    render(row) {
      const user = userOptions.value.find(opt => opt.value === row.userId);
      return user?.label || '未知用户';
    },
  },
  { title: '访问链接', key: 'link' },
  {
    title: '启用状态',
    key: 'status',
    render(row) {
      return h(NTag, {
        type: row.status ? 'success' : 'error',
      }, row.status ? '启用' : '禁用');
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NSpace, {}, [
        h(NButton, {
          size: 'small',
          onClick: () => handleEdit(row),
        }, '编辑'),
        h(NButton, {
          size: 'small',
          type: 'error',
          onClick: () => handleDelete(row),
        }, '删除'),
      ]);
    },
  },
]);

// 创建链接
function handleCreate() {
  const newLink = {
    id: Date.now(),
    name: createForm.name,
    userId: createForm.userId,
    link: `https://example.com/login/${Math.random().toString(36).substring(2, 15)}`,
    status: true,
  };

  linkList.value.unshift(newLink);
  message.success('创建成功');
  showCreateModal.value = false;
  createForm.name = '';
  createForm.userId = null;
}

// 编辑操作
function handleEdit(row) {
  message.info(`编辑 ${row.name}`);
}

// 删除操作
function handleDelete(row) {
  linkList.value = linkList.value.filter(item => item.id !== row.id);
  message.success('删除成功');
}
</script>
